<template>
  <div>
    <div id="chart11"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "@/utils/request";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      myChart: null,
    };
  },
  computed:{
    // ...mapState(["areaCode"]),
    ...mapGetters(["areaCode"]),
  },
  watch: {
    areaCode: {
      handler(newVal, oldVal) {
        this.getList();
      },
      deep: true,
    },
  },
  methods: {
    getList() {
      let arr =[
      { value: '', name: "断层数量" },
      { value: '', name: "积水区数量" },
      { value: '', name: "陷落柱数量" },
      { value: '', name: "最近危险源的距离" },
      { value: '', name: "积水区总含水量" },
      ]
      axios
        .get("/dataview/hydrology/getAreaSafetyGrade", {
          params: {
            areaCode: this.areaCode, //换三维对应的区域编码
            // areaName:''
          },
        })
        .then((res) => {
          if (res.data) {
            // this.title = res.data;
            arr[0].value = res.data.seamFault;
            arr[1].value = res.data.standingWater;
            arr[2].value = res.data.collapse;
            arr[3].value = res.data.distance;
            arr[4].value = res.data.waterVolume;
            this.echartsFn(arr)
          }
        });
    },
    echartsFn(arr) {
      // 真实后端数据
      const annularList = arr
      // [
      //   { value: 8, name: "断层" },
      //   { value: 8, name: "积水区" },
      //   { value: 10, name: "陷落柱" },
      // ];
      // 颜色
      const colorList = {
        断层数量: ["#54A8FF", "#8AC4FF"],
        积水区数量: ["#B6E8D0", "#70D3A3"],
        陷落柱数量: ["#AC7BE0", "#D9C2F1"],
        最近危险源的距离: ["#57d5e6", "#8de2ee"],
        积水区总含水量: ["#f2d157", "#f6e193"],
      };

      // 组装数据
      const newAnnularList = annularList?.map((item) => {
        return {
          ...item,
          itemStyle: {
            color: new echarts.graphic.RadialGradient(0, 0, 1, [
              {
                offset: 0,
                color: colorList[item.name][0],
              },
              {
                offset: 1,
                color: colorList[item.name][1],
              },
            ]),
          },
        };
      });

      // 配置项
      const option = {
        backgroundColor: "transparent",
        // title: {
        //   text: "设备类型分布",
        //   left: "center", // 对齐方式居中
        //   top: "45%", // 距离顶部
        //   textStyle: {
        //     // 文字配置
        //     color: "#fff", // 文字颜色
        //     fontSize: 15, // 字号
        //     align: "center", // 对齐方式
        //   },
        // },
        tooltip: {
          show: true,
          // formatter: "{a} <br/>{b}: {c} ({d}%)",
          backgroundColor: "#0B2C54", // 提示框浮层的背景颜色。
          borderRadius: 5,
          textStyle: {
            // 提示框浮层的文本样式。
            color: "#fff",
          },
        },
        legend: {
          top: "bottom",
          textStyle: {
            color: "#fff", // 文字颜色
            fontSize: 12, // 字号
          },
        },
        series: [
          {
            name: "评分",
            type: "pie",
            padAngle: 10,
            radius: ["35%", "55%"],
            center: ["50%", "40%"],
            // avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#183F6B",
              borderWidth: 4,
            },
            label: {
              show: true,
              position: "outside",
              formatter: (params) => {
                if (params.name == "断层数量") {
                  // return "{a| " + params.value + "}\n{a| " + params.percent + "%}";
                  return "{a| " + params.name + "}\n{a| " + params.value + "}";
                } else if (params.name == "积水区数量") {
                  return "{b| " + params.name + "}\n{b| " + params.value + "}";
                } 
                else if (params.name == "陷落柱数量") {
                  return "{c| " + params.name + "}\n{c| " + params.value + "}";
                } 
                else if (params.name == "最近危险源的距离") {
                  return "{d| " + params.name + "}\n{d| " + params.value + "}";
                } 
                else {
                  return "{e|" + params.name + "}\n{e| " + params.value + "}";
                }
              },
              rich: {
                a: {
                  color: "#54A8FF",
                  align: "left",
                  padding: 4,
                },
                b: {
                  color: "#70D3A3",
                  align: "left",
                  padding: 4,
                },
                c: {
                  color: "#AC7BE0",
                  align: "left",
                  padding: 4,
                },
                d: {
                  color: "#57d5e6",
                  align: "left",
                  padding: 4,
                },
                e: {
                  color: "#f2d157",
                  align: "left",
                  padding: 4,
                },
              },
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 30,
            },
            data: newAnnularList,
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("chart11"));
    this.echartsFn();
    // 为窗口的resize事件绑定事件处理函数
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  created() {
    this.getList();
  },
  beforeDestroy() {
    // this.myChart.dispose()//销毁
    this.myChart.clear(); //销毁
  },
};
</script>

<style scoped lang="scss">
#chart11 {
  width: 100%;
  height: 300px;
}
</style>